﻿
 
var Drag =function  (elem, prangeElem)
{
    $$that  = this;
    var o = elem;
    // 현재 span tag의 상위 TD 정보를 검색한다.
    var tdE =NodeUtil.getParentTagElem(elem,'TD');
    // 현재 span tag의 상위 Table 정보를 검색한다.
    var tableE =NodeUtil.getParentTagElem(elem,'TABLE');

   // span tab  event를 설정한다.
    addEvent(elem ,'mousedown', this.dragStart) ;
    addEvent(elem ,'mouseover', this.mouseover) ;


    this.getE = function()  { return o;};
    this.getTdE = function()  { return tdE;};
    this.getTableE = function()  { return tableE;};
    // 해당 tag의 event처리 방법을 정의 하는 메소스들이다.
    //각각의 biz 부분이 들어갈수 있다.
    o.beforeStart = new Function() ;
    o.beforeEnd =  new Function() ;
    o.beforeDrag = new Function() ;
    o.beforeOver = new Function() ;

    this.startX=0;
    this.startY=0;

}

Drag.prototype.fixE =function (event)
{
    if ( typeof event== 'undefined' ) event= window.event;
    if ( typeof event.layerX === 'undefined') event.layerX = event.offsetX;
    if ( typeof event.layerY === 'undefined') event.layerY = event.offsetY;
    return event;
}

/**
 * 마스스 over일때
 * @param event
 */

Drag.prototype.mouseover = function (event){
    this.drag.getE().beforeOver(event);
}

Drag.prototype.dragStart = function(event)
{
  //  if ( event.button!==1) return ;
   //root doc에 event를 추가하여 drag 할수 있도록 한다.
    document.drag = this.drag;  //document에 설정한다.
     var e = this.drag.fixE(event);

     //drag 하기전 시작 위치를 설정한다.
     console.log('init start '+ e.clientX);
     this.drag.startX =e.clientX;
     this.drag.startY =e.clientY;
     // 현재 table과 cell 폭
     this.drag.lastWidth =this.drag.getTableE().clientWidth;
     this.drag.tdlastWidth =this.drag.getTdE().clientWidth;
     this.drag.getE().beforeStart(e);

     console.log('tagName this.drag.lastWidth' + this.drag.lastWidth +  ' start '+  this.drag.startX);
   //  console.log('tagName ' +  nodetd.offsetTop+ '  left ' + nodetd.offsetLeft + ' width ' +  nodetd.clientWidth);
     addEvent(document ,'mouseup', this.drag.dragEnd) ;
     addEvent(document ,'mousemove', this.drag.draging) ;
     // drag를 시작하면 text 블럭을 select하는 것을 막는다.
     document.onselectstart= function() {
         return false;};
}

Drag.prototype.dragEnd = function(event)
{
    this.drag.getTdE().style.background='white';
    var e = this.drag.fixE(event);


      removeEvent(document,'mouseup',this.drag.dragEnd)  ; //this는 document이다.
      removeEvent(document,'mousemove',this.drag.draging);  //this는 document이다.
      // text 블럭을 select하는 실행가능하도록 한다.
      document.onselectstart = function() { return true;};
      this.drag.getE().beforeEnd(e);
      delete document.drag;  // document에 설정된 drag object를 삭제처리한다.

}

Drag.prototype.draging = function(event)
{
 //   var e = this.drag.fixE(event);
    console.log('draging layer' + event.layerX + ',' + event.layerY + ' client ' + event.clientX +  ','+ event.clientY + ' offset' + event.pageX + event.target);
    this.drag.getE().beforeDrag(event);
    return false;  //event capturing 대문에 return false를 해야한다.

}





NodeUtil ={

        /**
         * 상위 노드의 Tag 를 찾아온다.
         */
        getParentTagElem : function(elem, parentTagName)
        {
             if( !elem.parentNode) return ;
             console.log('elem.parentNode.tagName ==> ' + elem.parentNode.tagName);
             if (elem.parentNode.tagName===parentTagName)
             {
                 return elem.parentNode;
             } else
             {
                return  this.getParentTagElem( elem.parentNode,parentTagName );
             }
        },
        pageX :function (elem)
        {
            console.log(' elem.borderWidth ' +   elem.borderWidth + ' elem.offsetLeft ' + elem.offsetLeft + ' ' + elem.clientLeft );
            return this.findPos(elem)[0];
            //return elem.offsetParent? elem.offsetLeft + this.pageX(elem.offsetParent): elem.offsetLeft;
        }
        ,
        pageY:function (elem)
        {
            return this.findPos(elem)[1];
            //return elem.offsetParent? elem.offsetTop + this.pageY(elem.offsetParent): elem.offsetTop;
        },
        /**
         * elem먼트의 left와 top, 위치를 알아낸다.
         * @param elem
         */
        findPos : function(elem) {
            var curleft = curtop =0;

            if (elem.offsetParent){
                do {
                    curleft += elem.offsetLeft;
                    curtop += elem.offsetTop;
                } while(elem = elem.offsetParent);

            }
            return [curleft,curtop];
        }

};





